<script>
    import { onMount } from 'svelte';
    import { eventEmitter } from '../eventEmitter.js';
    import { fade } from 'svelte/transition';

    let showModal = false;
    let title = '';
    let detail = '';
    let buttons = [];

    // 按钮类型映射到对应的样式类
    const buttonTypes = {
        'Basic': 'basic',
        'Important': 'important'
    };

    onMount(() => {
        eventEmitter.on('modal-show', (data) => {
            title = data.title || '';
            detail = data.detail || '';
            
            // 处理按钮配置
            if (data.button && Array.isArray(data.button)) {
                buttons = data.button.map(btn => ({
                    text: btn.value,
                    class: buttonTypes[btn.type] || 'important', // 默认为important
                    onClick: () => {
                        if (btn.callbacks) btn.callbacks();
                        closeModal();
                    }
                }));
            } else if (typeof data.btnValue === 'string') {
                buttons = [{
                    text: data.btnValue,
                    class: 'important',
                    onClick: () => closeModal()
                }];
            } else if (Array.isArray(data.btnValue)) {
                // 保持原有的btnValue兼容性
                buttons = data.btnValue.map(btn => {
                    if (typeof btn === 'string') {
                        return {
                            text: btn,
                            class: 'important',
                            onClick: () => closeModal()
                        };
                    }
                    return {
                        text: btn.text,
                        class: btn.class || 'important',
                        onClick: () => {
                            if (btn.callback) btn.callback();
                            if (btn.closeOnClick !== false) closeModal();
                        }
                    };
                });
            }
            
            showModal = true;
        });
    });

    function closeModal() {
        showModal = false;
    }
</script>

{#if showModal}
    <div class="modal-backdrop" >
        <div class="modal-content" on:click|stopPropagation>
            <div class="modal-header">
                <h3>{title}</h3>
                <button class="close-btn" on:click={closeModal}>&times;</button>
            </div>
            <div class="modal-body">
                {detail}
            </div>
            <div class="modal-footer">
                {#each buttons as btn}
                    <button 
                        class="modal-btn {btn.class}" 
                        on:click={btn.onClick}
                    >
                        {btn.text}
                    </button>
                {/each}
            </div>
        </div>
    </div>
{/if}

<style>
    .modal-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000;
    }

    .modal-content {
        background-color: #2d2d2d;
        border-radius: 8px;
        padding: 20px;
        min-width: 300px;
        max-width: 500px;
        color: #fff;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
    }

    .modal-header h3 {
        margin: 0;
        font-size: 1.5rem;
    }

    .close-btn {
        background: none;
        border: none;
        color: #fff;
        font-size: 1.5rem;
        cursor: pointer;
        padding: 0;
    }

    .modal-body {
        margin-bottom: 20px;
        line-height: 1.5;
    }

    .modal-footer {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
    }

    .modal-btn {
        color: white;
        border: none;
        padding: 8px 16px;
        border-radius: 4px;
        cursor: pointer;
        transition: all 10ms;
    }

    .modal-btn:hover {
        opacity: 0.9;
    }

    .modal-btn.important {
        background: #4CAF50;
    }

    .modal-btn.basic {
        background: #757575;
    }
</style> 